<!DOCTYPE html/>
<html>

<head>
    <meta charset="utf-8">
    <title>
        Congratulations on your custom logo!
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        @font-face {
            font-family: "Avenir W01";
            src:
                url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix") format("eot"),
                url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/b290e775-e0f9-4980-914b-a4c32a5e3e36.woff2") format("woff2"),
                url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/4b978f72-bb48-46c3-909a-2a8cd2f8819c.woff") format("woff"),
                url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/9bdf0737-f98c-477a-9365-ffc41b9d1285.ttf") format("truetype"),
                url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/15281d0d-e3c2-46e1-94db-cb681e00bfaa.svg#15281d0d-e3c2-46e1-94db-cb681e00bfaa") format("svg");
            font-weight: 400;
            font-style: normal;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: #f8f8f8;
            font-family: "Avenir W01", sans;
            font-size: 1.4rem;
            line-height: 2.5rem;
            color: #222;
            margin: 0;
        }

        article {
            width: 100%;
            max-width: 70rem;
            padding: 100px;
            margin: 40px auto  75px;
            background-color: #fff;
            box-shadow: #c0c0c0 5px 0px 35px -8px;
        }
        h1, h2, h3 {
            margin-top: 3rem;
            margin-bottom: 0;
        }
        h3 {
            font-size: 1.4rem;
        }
        p {
            margin-top: .75rem;
            margin-bottom: .25rem;
        }
        hr {
            margin: 2rem auto;
            height: 3px;
            background-color: #f0f0f0;
            border: 0;
        }
        svg {
            width: 10em;
            height: auto;
            margin: 0 auto 40px;
            display: block;
        }
        h2 {
            color: #4f6df5;
        }
        a {
            color: #4f6df5;
        }
        .fonts_colors {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .fonts_colors > div {
            flex:1 1 50%;
        }

        .font {
            display: block;
        }

        .swatch {
            border: 1px solid rgba(0,0,0,.3);
            border-radius: 4px;
            height: 2rem;
            width: 100%;
            display: block;
            margin-bottom: .5rem;
        }
        .colors_list {
            display: flex;
        }
        .color {
            margin: 1.5rem 3rem .5rem 0;
        }
        .color span {
            white-space: nowrap;
            display: block;
        }

    </style>


</head>

<body>
    <article>
        <h2>
            Using your files
        </h2>
        <p>
            Here’s a quick breakdown of where and how to use your files:
        </p>
        <h3>
            Online
        </h3>
        <p>
            If you’re using your logo for any digital purpose — from PowerPoint presentations to social media profiles
            — choose
            PNG files.
        </p>
        <h3>
            Print
        </h3>
        <p>
            If you’re sending your logo to be printed on business cards, brochures, clothing, and more, provide the
            printer with a PDF or EPS. If the print is more technical and requires edits from the
            printer, send vector files (SVG or EPS).
        </p>

        <h3>
            Sending to a Designer
        </h3>
        <p>
            If you’re sending your logo to a designer to make changes, use SVG or EPS files unless
            they request otherwise.
        </p>

        <h3>
            Sharing
        </h3>
        <p>
            When sharing a logo file, send a PDF or PNG, as they’re easy-to-read file formats.
        </p>

        <h3>
            Resizing
        </h3>
        <p>
            Don’t see all of the file sizes you need? Use <a href="http://resizeimage.net/" target="_blank">this website</a> to adjust the file sizes of your PNG logo.
        </p>

        <h2>
            Your Logo Font and Colors
        </h2>
        <section class="fonts_colors">
            <div>
                <h3>Fonts</h3>
                <p class="font_list">
                    <span class="font">Avenir Black</span><span class="font">Avenir Black</span><span class="font">Palm Beach</span>
                </p>
            </div>
            <div>
                <h3>Colors</h3>
                <div class="colors_list">
                    
<div class="color">
	<span class="swatch" style="background-color: 25272C"></span>
	<span class="name">Shark 3</span>
	<span class="hex">#25272C</span>
</div>

                </div>
            </div>
        </section>
        <p>
            Happy business-building!
        </p>
    </article>
</body>

</html>